<template>
  <view class="user-pages container">
    <navbar pages bgColor="#C94117" />
    <view
      v-if="roleId != '65eea1c262a53e335dc6cb54'"
      class="user-pages-header relative padding-y-24 padding-x-20 flex"
      :class="{ 'items-center': !isLogin }"
    >
      <u-avatar size="122rpx" :src="avatar" />
      <view v-if="isLogin" class="user-info flex-col flex-grow justify-evenly">
        <text class="user-name text_ellipsis">{{ realName }}</text>
      </view>
      <view
        v-else
        class="login-btn color-white bg-theme radius-25"
        @click="handleLogin"
      >
        点击登录
      </view>

      <!-- 设置菜单 -->
      <view class="menu">
        <view class="menu-header flex flex-item-center flex-justify-between">
          <view class="menu-header-title"> 我的订单 </view>
          <view
            class="menu-header-icon flex flex-item-center"
            @click="$jump('/subPages/user/order/order')"
          >
            <span>全部</span>
            <u-icon name="arrow-right" size="10" color="#B8B8B8"></u-icon>
          </view>
        </view>
        <view class="menu-body flex flex-item-center flex-justify-around">
          <view
            class="menu-item"
            v-for="(item, index) of userMenuList"
            @click="handleMenuItemClick(item)"
            :key="index"
          >
            <image :src="item.img" mode="" />
            <view class="name">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 技师 -->
    <view class="technician-header" v-else>
      <view class="technician-header-setting">
        <view class="flex justify-between">
          <view
            class="header-address flex items-center"
            @click="settingAddress"
          >
            <text class="address">{{ technicianInfo.city }}市</text>
            <u-icon name="arrow-down-fill" size="10" color="#fff"></u-icon>
          </view>
          <view class="header-run flex items-center">
            <view class="header-run-label" style="margin-right: 10rpx">
              接单模式
            </view>
            <u-switch
              v-model="startServe"
              activeColor="#C94117"
              @change="change"
            ></u-switch>
            <view class="header-run-status" style="margin-left: 10rpx">
              {{ value ? "开启" : "关闭" }}
            </view>
          </view>
        </view>

        <!-- 技师信息 -->
        <view class="technician-header-setting-container">
          <view class="container-user flex justify-between" v-if="isLogin">
            <view class="flex items-center">
              <u-avatar size="100rpx" :src="avatar" />
              <text class="user-name text_ellipsis">{{ realName }}</text>
            </view>
            <view
              class="user-link flex items-center"
              @click="
                $jump('/subPages/user/settled/settled', {
                  query: { id: technicianInfo._id },
                })
              "
            >
              <text>修改资料</text>
              <u-icon name="arrow-right" size="12" color="#B8B8B8"></u-icon>
            </view>
          </view>

          <!-- 退出显示 -->
          <view style="padding: 20rpx 40rpx" v-else>
            <view
              class="login-btn color-white bg-theme radius-25"
              @click="handleLogin"
            >
              点击登录
            </view>
          </view>

          <view class="container-order flex items-center justify-around">
            <view class="order-item">
              <view>200</view>
              <text>接单量</text>
            </view>
            <view class="order-item">
              <view>5</view>
              <text>评分</text>
            </view>
            <view
              class="order-item"
              @click="$jump('/subPages/user/technician/money/user-money')"
            >
              <view>2500</view>
              <text>个人金额</text>
            </view>
          </view>
        </view>

        <!-- 菜单 -->
        <view
          class="technician-header-setting-menu flex items-center justify-around"
        >
          <view
            class="menu-item"
            v-for="item of technicianMenuList"
            :key="item.name"
            @click="handleClickMenuItem(item)"
          >
            <image
              v-if="item.icon"
              style="width: 64rpx; height: 58rpx"
              :src="$helper.filterCover(item.icon[0].url)"
              alt=""
            />
            <view class="name">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>
    <view
      :style="{
        marginTop: roleId === '65eea1c262a53e335dc6cb54' ? '348rpx' : '116rpx',
      }"
      class="user-pages-body bg-white radius-10 overflow-hidden padding-y-24 margin-t-24"
    >
      <u-cell-group
        v-if="roleId !== '65eea1c262a53e335dc6cb54'"
        :border="false"
        :customStyle="{ fontSize: '26rpx' }"
      >
        <u-cell
          v-for="(item, index) in cellList"
          :key="index"
          isLink
          center
          size="large"
          rightIconStyle="color:#C5C5C5;"
          :icon="item.icon"
          :title="item.title"
          @click="handleCellClick(item)"
        />
      </u-cell-group>
      <u-cell-group v-else :border="false" :customStyle="{ fontSize: '26rpx' }">
        <!-- #C5C5C5 -->
        <u-cell
          v-for="(item, index) in technicianSettingList"
          :key="index"
          isLink
          center
          size="large"
          rightIconStyle="color:#C5C5C5;"
          :icon="getSettingIcon(item.icon)"
          :title="item.title"
          @click="handleTechnicianCellClick(item)"
        />
      </u-cell-group>
    </view>
  </view>
</template>

<script>
import infoMixin from "@/common/mixins/info";
import { getModelList, updateModel } from "@/api";
// import storage from "@/common/function/storage";
import { getSearchFilter } from "@/common/function";
// 获取用户信息
import { getUserInfo } from "@/api/user";
import { mapState } from "vuex";
export default {
  mixins: [infoMixin],
  data() {
    const getIcon = (icon) => `/static/image/icon/user/${icon}.png`;
    const getPath = (path) => `/subPages/user/${path}/${path}`;

    return {
      cellList: [
        {
          title: "技师入驻",
          path: getPath("settled"),
          icon: getIcon("settled"),
        },
        {
          title: "地址信息",
          path: getPath("map"),
          icon: getIcon("map"),
        },
        { title: "反馈", path: getPath("feedback"), icon: getIcon("feedback") },
        {
          title: "加入我们",
          path: getPath("join"),
          icon: getIcon("join"),
        },
        {
          title: "设置",
          path: getPath("settings"),
          icon: getIcon("newSetting"),
        },
      ],
      startServe: false,
      show: false,
      technicianInfo: {},
      technicianItem: {},
    };
  },
  async onShow() {
    await getUserInfo();
    let that = this;
    if (this.roleId === "65eea1c262a53e335dc6cb54") {
      //获取技师注册信息
      this.getTechnicianInfo().then((res) => {
        that.getTechnicianListData(res._id);
      });
    }
  },

  async onLoad() {
    await this.$store.dispatch("role/getRoleList");
    await this.$store.dispatch("role/getTechnicianMenu");
    await this.$store.dispatch("role/getTechnicianSetting");
  },
  watch: {
    technicianItem: {
      handler: function (val) {
        this.startServe = val?.technician_status ? false : true;
      },
      immediate: true,
    },
  },
  computed: {
    ...mapState("dictionary", ["userMenuList"]),
    ...mapState("role", ["technicianMenuList", "technicianSettingList"]),
    studyDays() {
      return 0;
    },
    roleId() {
      return this.userInfo.roleId?.[0];
    },
  },
  methods: {
    handleLogin() {
      this.$jump("/subPages/user/login/login");
    },
    // 客户设置
    handleCellClick(item) {
      if (this.$storage.get("isServer") && item.title === "技师入驻") {
        this.$message("你已经注册了该用户，请勿重复注册", "none");
        return;
      }
      if (!item.path) {
        this.$message("功能开发中...", "none");
      } else {
        this.$jump(item.path);
      }
    },
    // 技师设置
    handleTechnicianCellClick(item) {
      if (!item.is_link) {
        this.callPhone();
      } else {
        this.$jump(item.path, {
          query: { technicianId: this.technicianInfo._id },
        });
      }
    },
    // 紧急联系
    callPhone() {
      let phoneNumber = this.technicianInfo.urgent_phone;
      uni.makePhoneCall({
        phoneNumber,
        success: function () {
          console.log("拨打成功");
        },
        fail: function () {
          console.log("拨打失败");
        },
      });
    },
    handleMenuItemClick({ code }) {
      this.$jump(`/subPages/user/order/order?code=${code}`);
    },
    getSettingIcon(icon) {
      return this.$helper.filterCover(icon[0].url);
    },
    // 接单模式修该
    async change(e) {
      console.log(e);
      this.technicianItem.technician_status = e ? 0 : 1;
      let id = this.technicianItem._id;

      await updateModel("65fbe6475efd5153ff566a8b", this.technicianItem, id);
      uni.showToast({
        title: e ? "暂停接待" : "开启接待",
        icon: "none",
      });
    },
    // 设置地址
    settingAddress() {
      let data = this.technicianItem;
      let id = data._id;
      uni.chooseLocation({
        success: async function (res) {
          // console.log("位置信息：" + JSON.stringify(res));
          // console.log("位置名称：" + res.name);
          // console.log("详细地址：" + res.address);
          // console.log("纬度：" + res.latitude);
          // console.log("经度：" + res.longitude);
          // console.log("数据", data);
          data.server_address = res.longitude + "," + res.latitude;
          data.city = res.name.split("市")[0];
          await updateModel("65b20f5c0921260197c48aa9", data, id);
        },
      });
    },
    // 获取技师注册信息
    async getTechnicianInfo() {
      let filterData = {
        currentPage: 1,
        pageSize: -1,
        filter: getSearchFilter(
          { creatorUserId: this.userInfo.id },
          { method: "eq" }
        ),
      };
      const { data } = await getModelList(
        "65c08a445efd5153ff55d908",
        filterData
      );
      this.technicianInfo = data?.list?.[0];
      return data?.list?.[0];
    },
    // 获取技师列表数据
    async getTechnicianListData(technician_Info) {
      const { data, code } = await getModelList("65fbe6475efd5153ff566a8b", {
        currentPage: 1,
        pageSize: -1,
        filter: getSearchFilter({ technician_Info }, { method: "eq" }),
      });
      if (code === 200) this.technicianItem = data?.list?.[0];
    },
    //菜单点击
    handleClickMenuItem(item) {
      switch (item.name) {
        case "账单明细":
          this.$jump(item.path, {
            query: { id: this.technicianItem.technician_Info },
          });
          break;
        case "账单统计":
          this.$jump(item.path, {
            query: { id: this.technicianItem._id },
          });
          break;
        case "我的订单":
          this.$jump(item.path, {
            query: { technician_Id: this.technicianInfo._id },
          });
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.user-pages {
  &-header {
    position: relative;
    background-color: #c94117;
    padding-top: 16rpx;
    padding-bottom: 180rpx;
    ::v-deep > .u-avatar {
      margin-right: 36rpx;
    }
    .login-btn {
      width: 180rpx;
      height: 80rpx;
      font-size: 30rpx;
      text-align: center;
      line-height: 80rpx;
    }
    .user-info {
      .user-name {
        max-width: 7em;
        font-size: 36rpx;
        color: #fff;
      }
      .study-days {
        color: #969dab;
      }
    }
    .head-bg {
      width: 232rpx;
      right: 32rpx;
      height: 100%;
    }
    .menu {
      width: 94%;
      height: 218rpx;
      background-color: #fff;
      position: absolute;
      bottom: -68rpx;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 16rpx;
      box-shadow: 0px 6px 18px 1px rgba(173, 188, 184, 0.2);

      &-header {
        width: 100%;
        color: #333333;
        padding: 20rpx 20rpx 30rpx;
        box-sizing: border-box;

        &-title {
          font-size: 32rpx;
          color: #333333;
          font-weight: bold;
        }

        &-icon {
          font-size: 28rpx;
          color: #999999;
          > span {
            margin-right: 10rpx;
          }
        }
      }

      &-item {
        margin: auto;
        text-align: center;
        > image {
          width: 50rpx;
          height: 50rpx;
        }
        .name {
          font-size: 26rpx;
          color: #333333;
          margin-top: 20rpx;
        }
      }
    }
  }
  // 技师头部
  .technician-header {
    position: relative;
    height: 300rpx;
    background-color: #c94117;

    &-setting {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 20rpx;

      .login-btn {
        width: 180rpx;
        height: 80rpx;
        font-size: 30rpx;
        text-align: center;
        line-height: 80rpx;
        margin: 20rpx 40rpx;
      }

      .header-address {
        font-size: 26rpx;
        color: #f9f9f9;

        .address {
          margin-right: 10rpx;
        }
      }
      .header-run {
        > view {
          font-size: 26rpx;
          color: #f9f9f9;
        }
      }

      &-container {
        margin-top: 20rpx;
        background: #ffffff;
        border-radius: 20rpx;

        .container-user {
          padding: 20rpx;
          box-sizing: border-box;

          .user-name {
            font-size: 28rpx;
            color: #333333;
            margin-left: 20rpx;
          }

          .user-link {
            font-size: 26rpx;
            color: #666666;
          }
        }

        .container-order {
          margin-top: 22rpx;
          padding-bottom: 24rpx;

          .order-item {
            color: #333;
            text-align: center;
            > view {
              font-size: 38rpx;
              font-weight: 800;
              margin-bottom: 10rpx;
            }

            > text {
              font-size: 26rpx;
            }
          }
        }
      }

      &-menu {
        margin-top: 20rpx;
        background: #ffffff;
        border-radius: 20rpx;
        padding: 50rpx 20rpx;
        box-sizing: border-box;

        .menu-item {
          text-align: center;
          .name {
            font-size: 26rpx;
            color: #333333;
            margin-top: 20rpx;
          }
        }
      }
    }
  }
  &-body {
    margin-top: 116rpx;
  }
  ::v-deep .u-cell:last-child > .u-cell__body + view {
    // 隐藏最后一个下划线
    display: none;
  }
  ::v-deep .u-cell__title-text {
    // font-weight: bold;
    text-indent: 0.6em;
  }
}
</style>
